<script setup lang="ts">
import { onMounted, ref, h } from 'vue'
import Button from './components/Button/Button.vue'
import Collapse from './components/Collapse/Collapse.vue'
import CollapseItem from './components/Collapse/CollapseItem.vue'
import type { ButtonInstance } from './components/Button/types'
import Icon from './components/Icon/Icon.vue'
import VNode from './VNode'
// import Tooltip from './components/Tooltip/Tooltip.vue'
import Alert from './components/Alert/Alert.vue'
import { TooltipInstance } from './components/Tooltip/types'
import DropdownTsx from './components/Dropdown/Dropdown.tsx'
import Dropdown from './components/Dropdown/Dropdown.vue'
import { MenuOption } from './components/Dropdown/types'
// import Message from './components/Message/Message.vue'
import { createMessage } from './components/Message/method'

const buttonRef = ref<ButtonInstance | null>(null)
const tooltipRef = ref<TooltipInstance | null>(null)
const overlayNode = ref<HTMLElement>()
const triggerNode = ref<HTMLElement>()
const options = ref<MenuOption[]>([
  {
    label: h('b', 'this is bold'),
    key: 1,
  },
  {
    label: 'item2',
    key: 2,
    disabled: true,
    divided: true,
  },
  {
    label: 'item3',
    key: 3,
    disabled: true,
  },
  {
    label: 'item4',
    key: 4,
  },
])

const optionsTsx = ref<MenuOption[]>([
  {
    label: h('b', 'this is bold tsx'),
    key: 1,
  },
  {
    label: 'item2 tsx',
    key: 2,
    disabled: true,
  },
  {
    label: 'item3 tsx',
    key: 3,
    disabled: true,
  },
  {
    label: 'item4 tsx',
    key: 4,
  },
])
// let popperInstance: Instance | null = null
const openedValue = ref(['a'])

const open = () => {
  tooltipRef.value?.show!()
}

const close = () => {
  tooltipRef.value?.hide!()
}

onMounted(() => {
  if (overlayNode.value && triggerNode.value) {
    /* popperInstance = createPopper(triggerNode.value, overlayNode.value, {
      placement: 'right',
    }) */
  }

  const instance = createMessage({ message: 'hello world - 1', duration: 0 })
  createMessage({ message: 'hello world - 2', duration: 0, type: 'success' })
  createMessage({ message: 'hello world - 3', duration: 0, type: 'danger' })
  createMessage({ message: 'hello world - 4', duration: 0, type: 'primary' })

  setTimeout(() => {
    // popperInstance?.setOptions({ placement: 'bottom' })
    // instance.destroy()
  }, 2000)
})
</script>

<template>
  <header>
    <Dropdown
      :menu-options="options"
      placement="right"
      trigger="click"
      @visible-change="(e) => console.log(e)"
      @select="(e) => console.log(e)"
    >
      <img height="200" width="200" src="./assets/vue.svg" />
      <template #content>
        <h1>hello tooltip</h1>
      </template>
    </Dropdown>
    <DropdownTsx :menu-options="optionsTsx" placement="right" trigger="click">
      <img height="200" width="200" src="./assets/vue.svg" />
      <template #content>
        <h1>hello tooltip</h1>
      </template>
    </DropdownTsx>
  </header>

  <div>
    <Icon icon="fa-solid fa-user-secret"></Icon>
    <Icon icon="arrow-up" size="2xl" type="primary"></Icon>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
  <br /><br />
  <Button ref="buttonRef" @click="open">Test Button</Button>
  <Button plain @click="close">Plain Button</Button>
  <Button round>Round Button</Button>
  <Button circle>CB</Button>
  <Button disabled>Disabled Button</Button>
  <br /><br />
  <Button type="primary">primary</Button>
  <Button type="success">success</Button>
  <Button type="info">info</Button>
  <Button type="warning">warning</Button>
  <Button type="danger">danger</Button>
  <br /><br />
  <Button type="primary" plain>primary</Button>
  <Button type="success" plain>success</Button>
  <Button type="info" plain>info</Button>
  <Button type="warning" plain>warning</Button>
  <Button type="danger" plain>danger</Button>
  <br /><br />
  <Button size="large" loading>large</Button>
  <Button size="small" icon="arrow-up">small</Button>
  <br /><br />
  <Collapse v-model="openedValue">
    <CollapseItem name="a">
      <template #title>
        <h1>nice title</h1>
      </template>
      <h2>headline title</h2>
      <div>this is content a aaa</div>
    </CollapseItem>
    <CollapseItem name="b" title="nice title b item b">
      <div>this is bbbb test</div>
    </CollapseItem>
    <CollapseItem name="c" title="nice title c item c" disabled>
      <div>this is ccc test</div>
    </CollapseItem>
  </Collapse>
  <br /><br />
  <VNode msg="hello world" />
  <br /><br />
  <Alert />
</template>

<style scoped>
.logo {
  padding: 1.5em;
  height: 6em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
./VNode.ts
